<script setup>
import { ref } from 'vue'
import od from '@/assets/od.png'
import os from '@/assets/os.png'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
const canvas = ref(null) // canvas 元素
const ctx = ref(null) // canvas 上下文
const isDrawing = ref(false) // 是否正在绘制
const history = ref([]) // 绘制历史记录
const image = ref(null) // 加载的图片
const penColor = ref('#ff0000') // 默认画笔颜色 红色
const penWidth = ref(2) // 默认画笔粗细

// 开始绘制
const startDrawing = (event) => {
  isDrawing.value = true
  const { offsetX, offsetY } = event
  ctx.value.beginPath()
  ctx.value.moveTo(offsetX, offsetY)
}

// 绘制
const draw = (event) => {
  if (!isDrawing.value) return
  const { offsetX, offsetY } = event
  ctx.value.lineWidth = penWidth.value // 设置画笔粗细
  ctx.value.strokeStyle = penColor.value // 设置画笔颜色
  ctx.value.lineTo(offsetX, offsetY)
  ctx.value.stroke()
}

// 停止绘制
const stopDrawing = () => {
  if (isDrawing.value) {
    isDrawing.value = false
    ctx.value.closePath()
    saveHistory() // 保存当前状态
  }
}

// 保存绘制历史
const saveHistory = () => {
  history.value.push(canvas.value.toDataURL())
}

// 撤销功能
const undo = () => {
  if (history.value.length > 0) {
    history.value.pop() // 移除最后一个状态
    const lastState = history.value[history.value.length - 1]
    const img = new Image()
    img.src = lastState
    img.onload = () => {
      ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
      ctx.value.drawImage(img, 0, 0) // 恢复到上一个状态
    }
  }
}
// 清空画布
const clear = () => {
  ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height) // 清空画布
  init() // 重新绘制初始图片
  history.value = [] // 清空历史记录
}
//获取文件格式的数据
const getData = () => {
  // 下载图片
  const a = document.createElement('a')
  a.href = canvas.value.toDataURL('image/png')
  a.download = 'canvas.png'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  return canvas.value.toDataURL('image/png')
}
const init = () => {
  ctx.value = canvas.value.getContext('2d')
  image.value = new Image()
  image.value.src = props.title === 'OD' ? od : os // 根据 title 加载不同的图片
  image.value.onload = () => {
    const canvasEl = canvas.value
    canvasEl.width = image.value.width
    canvasEl.height = image.value.height
    ctx.value.drawImage(image.value, 0, 0)
    saveHistory() // 保存初始状态
  }
}
// 初始化 canvas 上下文
onMounted(() => {
  setTimeout(() => {
    init()
  }, 200)
})

defineExpose({
  getData,
  clear
}) // 暴露撤销方法
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <!-- 画布 -->
    <div class="mb-4 font-bold text-lg">{{ title }}</div>
    <canvas ref="canvas" width="300" height="280" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
    <!-- <div class="mt-2 flex items-center">
      <label>颜色：</label>
      <input v-model="penColor" type="color" />
      <label class="ml-4">粗细：</label>
      <input v-model="penWidth" type="number" min="1" max="10" />
    </div> -->
    <a-button class="mt-2" size="small" type="default" @click="undo"><BaseIcon name="UndoOutlined" />撤销</a-button>
  </div>
</template>
